<html>
	<head>
		<script language="JavaScript" type="text/javascript">
			// Dojo configuration
			djConfig = { 
				parseWidgets: false,
				isDebug: true
			};
		</script>
		<script language="JavaScript" type="text/javascript" 
			src="../../dojo.js"></script>
		<script language="JavaScript" type="text/javascript">
			dojo.require("dojo.event.topic");

			function Subscriber(displayNode){
                this.displayNode = displayNode;

                this.update = function(message) {
                    this.displayNode.innerHTML = message;
                };
			}

            var topic1 = dojo.event.topic.getTopic("testTopic1");
            var topic2 = dojo.event.topic.getTopic("testTopic2");
            var clickCount = 0;

            function sendMessage1() {
                topic1.sendMessage("Message " + ++clickCount);
            }

            function sendMessage2() {
                topic2.sendMessage("Message " + ++clickCount);
            }

			dojo.hostenv.modulesLoadedListeners.push(function(){
				var sub1 = new Subscriber(document.getElementById("subscriber1"));
				var sub2 = new Subscriber(document.getElementById("subscriber2"));

                topic1.subscribe(sub1, "update");
                topic1.subscribe(sub2, "update");

                topic2.subscribe(sub2, "update");
			});
		</script>
	</head>
	<body>
		Check your javascript log; the scripts were all loaded in the head.

		<div id="subscriber1">
			subscriber1
		</div>

		<div id="subscriber2">
			subscriber2
		</div>

		<button id="publisher" onclick="sendMessage1();">
			Publish a message on Topic1
		</button>

		<button id="publisher2" onclick="sendMessage2();">
			Publish a message on Topic2 
		</button>

    </body>
</html>
